<template>
  <!-- 评分配置 组件 -->
  <div>
    <div class="dialog_main">
      <div
        :class="
          item.xqlx.includes('取消') || item.xqlx.includes('删除')
            ? 'block block_ng'
            : 'block'
        "
        v-for="(item, index) in ratingData"
        :key="item.xqlx"
      >
        <span class="demonstration">{{ item.xqlx }}</span>
        <el-slider
          v-if="item.xqlx.includes('取消') || item.xqlx.includes('删除')"
          v-model="ratingData[index].xqd"
          :marks="marks[index]"
          :show-tooltip="false"
          :min="-100"
          :max="0"
        >
        </el-slider>
        <el-slider
          v-else
          v-model="ratingData[index].xqd"
          :marks="marks[index]"
          :show-tooltip="false"
          style="bagcground:red"
        >
        </el-slider>
      </div>
    </div>
    <!-- 按钮 -->
    <div class="dialog_footer">
      <div class="dialog_btn active" @click="confirm">确认配置</div>
      <div class="dialog_btn" @click="handleClose">关闭</div>
    </div>
  </div>
</template>

<script>
import getData from "../api/home";
export default {
  name: "ratinglog",
  props: ["currentView", "isRating"],
  data() {
    return {
      ratingData: [],
      marks: [],
    };
  },
  watch: {
    // 更改数字气泡提示
    ratingData: {
      deep: true,
      handler() {
        // 改变tooltip
        this.ratingChange();
      },
    },
    // 请求配置信息
    // isRating: function(flag) {
    //   if (flag && this.currentView === "ratingLog") {
    //     this.getRatingData();
    //   }
    // },
  },
  mounted() {
    this.getRatingData();
  },
  methods: {
    // 确认配置
    confirm() {
      // 调用接口保存
      getData.weightAllot(this.ratingData).then((res) => {
        let type = "error";
        if (res.code === 200) {
          // 关闭弹窗
          this.handleClose();
          type = "success";
        }
        this.$message({
          type,
          message: res.msg,
        });
      });
    },
    // 滑块改变事件
    ratingChange() {
      this.marks = [];
      this.ratingData.forEach((item) => {
        const num = item.xqd;
        let obj = {};
        obj[num] = num + "";
        this.marks.push(obj);
      });
    },
    // 获取评分配置
    getRatingData() {
      //  目前写死用户test
      getData.queryweight("test").then((res) => {
        // 将 xqd 转换为数字 因监听了ratingData所以不直接对它进行更改 减少触发次数
        let data = [];
        res.data.forEach((item) => {
          data.push({
            userId: item.userId,
            xqlx: item.xqlx,
            xqd: Number(item.xqd),
          });
        });
        this.ratingData = data;
      });
    },
    handleClose() {
      // 因包裹在弹窗里 所以是在父组件的父组件
      this.$parent.$parent.isRating = false;
    },
  },
};
</script>

<style lang="scss" scoped>
.dialog_main {
  display: flex;
  min-height: 250px;
  flex-wrap: wrap;
  margin-top: 10px;
  // 单个滑块
  > div {
    width: 50%;
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    // 滑块名称
    .demonstration {
      width: 100px;
      font-size: 14px;
      color: #baffe5;
      text-align: right;
      padding-right: 10px;
    }
    // 滑块
    ::v-deep .el-slider {
      width: calc(100% - 110px);
      .el-slider__bar {
        background-color: #2ed97a;
        height: 8px;
      }
      .el-slider__runway {
        background: #2ed97a33;
        height: 8px;
      }
      .el-slider__button {
        background: transparent;
        border: none;
        width: 16px;
        height: 16px;
        background-image: url("../assets/image/按钮.png");
        background-repeat: no-repeat;
        background-size: 100% 100%;
      }
      // 滑动条提示显示
      .el-slider__marks-text {
        margin-top: -36px;
        width: 32px;
        height: 24px;
        background-image: url("../assets/image/气泡.png");
        background-repeat: no-repeat;
        background-size: 100% 100%;
        text-align: center;
        width: 36px;
        border-radius: 4px;
        font-size: 12px;
        color: #baffe5;
        line-height: 20px;
      }
    }
  }
  // 删除 取消 滑块的样式
  .block_ng {
    ::v-deep .el-slider {
      // transform: rotate(180deg);
      // .el-slider__bar {
      // }
      .el-slider__runway {
        background-color: #ee6c5b !important;
      }
    }
  }
}
</style>
